<template>
	<view class="container">
		<view class="tabcontainer">
			<scroll-view scroll-x style="white-space: nowrap;">
				<view class="tablist">
					<view @click="changTab(0)" :class="['tab',tab===0?'active':'']">全部订单</view>
					<view @click="changTab(1)" :class="['tab',tab===1?'active':'']">待进行</view>
					<view @click="changTab(2)" :class="['tab',tab===2?'active':'']">进行中</view>
					<view @click="changTab(3)" :class="['tab',tab===3?'active':'']">已完成</view>
					<view @click="changTab(5)" :class="['tab',tab===5?'active':'']">已取消</view>
				</view>
			</scroll-view>
		</view>
		<view style="width: 100%;height: 88rpx;"></view>
			<view class="cardcontainer">
				<Ordercard v-for="(item,index) in orderlist" :key="item.order_id" @changefresh="freshchange" :order="item">
					<template v-slot:bottom>
						<view class="price">
							实付款<text style="font-weight: 700;">￥{{Math.floor(item.order_sum*100 / 100)}}.<text style="font-size: 24rpx;">{{item.order_sum*100-Math.floor(item.order_sum*100 / 100)*100}}</text></text>
						</view>
					</template>
				</Ordercard>
			</view>
	</view>
</template>

<script lang="ts" setup>
	import {ref,reactive} from "vue"
	import {onShow,onReachBottom,onLoad} from "@dcloudio/uni-app"
	import Ordercard from "./components/ordercard.vue"
	import http from "@/utils/request.js"
	import websocketUtil from "@/utils/websocketUtil.js"
	onLoad((e)=>{
		uni.$on('freshchange',(value)=>{
			freshchange(value)
		})
		let websocket = new websocketUtil("ws://localhost:8082",1000)
		let response = http.get('/message/getnoreadnum',{
			receive_id:uni.getStorageSync('peopleinfo').people_id,
			is_user_send:1
		})
		response.then(res=>{
			if(res.data.code===200){
				getApp().globalData.noreadnum=res.data.data
				if(getApp().globalData.noreadnum>0)uni.setTabBarBadge({
				index:1,
				text:String(getApp().globalData.noreadnum)
			})
			}
		})
		getApp().globalData.socket=websocket
		getApp().globalData.socket.send(JSON.stringify({sendid:'p'+uni.getStorageSync('peopleinfo').people_id,receiveid:'p'+uni.getStorageSync('peopleinfo').people_id}))
		getApp().globalData.socket.getMessage(()=>{
			getApp().globalData.noreadnum++;
			let hh=getCurrentPages()
			if(hh.length>1)getApp().globalData.istabbar=false
			if(getApp().globalData.istabbar)uni.setTabBarBadge({
				index:1,
				text:String(getApp().globalData.noreadnum)
			})
		})
	})
	onShow(()=>{
		if(!getApp().globalData.istabbar){
			getApp().globalData.istabbar=true
			uni.setTabBarBadge({
				index:1,
				text:String(getApp().globalData.noreadnum)
			})
		}
		if(fresh.value===1){
			return fresh.value--
		}
		getorderlist(true)
	})
	onReachBottom(()=>{
		console.log('bottom')
		if(isloading.value)return;
		if(Page_No.value*Page_Size.value>=total.value){
			return uni.showToast({
				title:'订单已全部加载',
				icon:'none'
			})
		}
		Page_No.value++;
		getorderlist(false)
	})
	
	let fresh=ref(0)
	let isloading=ref(false)
	let tab=ref(0)
	let orderlist=ref([])
	let Page_No=ref(1)
	let Page_Size=ref(5)
	let total=ref(0)
	
	function freshchange(e){
		console.log(e)
		fresh.value=e
	}
	function changTab(e){
		tab.value=e;
		getorderlist(true)
	}
	function scrollMove(e){
		console.log(e)
	}
	function getorderlist(e){
		isloading.value=true;
		if(e){
			orderlist.value=[]
			Page_No.value=1
		}
		let response=http.get('/order/getpeopleorder',{
			order_people:uni.getStorageSync('peopleinfo').people_id,
			order_status:tab.value,
			Page_No:Page_No.value,
			Page_Size:Page_Size.value
		})
		response.then(res=>{
			isloading.value=false;
			if(res.data.code===200){
				orderlist.value=[...orderlist.value,...res.data.data]
				total.value=res.data.total
			}
		})
	}
	

</script>

<style lang="scss">
	.container{
		width: 100%;
		
		.tabcontainer{
			background-color: #ffffff;
			width: 100%;
			position: fixed;
			top: 0;
			
			.tablist{
				padding: 20rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				justify-content: flex-start;
				
				.tab{
					font-size: 36rpx;
					margin-right: 40rpx;
					color: #626669;
					
					&.active{
						color:#000000;
						position: relative;
						font-weight: 600;
						
						&::after{
							content: '';
							position: absolute;
							border-radius: 40rpx;
							width: 120rpx;
							height: 10rpx;
							background: linear-gradient(80deg,#f8e177 49.5%,transparent 49.5%,#fae68d 49.5%);
							bottom: -20rpx;
							right: 50%;
							transform:translateX(50%) ;
						}
					}
				}
			}
		}
		
		.cardcontainer{
			box-sizing: border-box;
			width: 100%;
			height: 100%;
			padding: 0 20rpx;
			
			.price{
				display: flex;
				align-items: baseline;
				justify-content: flex-end;
				font-size: 32rpx;
				font-weight: 500;
			}
		}
	}
</style>
